<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">
    <title>沐锦 | 城市类型</title>

    <link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="/static/css/entypo.css">
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/neon-core.css">
    <link rel="stylesheet" href="/static/css/neon-theme.css">
    <link rel="stylesheet" href="/static/css/neon-forms.css">
    <link rel="stylesheet" href="/static/css/custom.css">
    <script src="/static/js/jquery-1.11.0.min.js"></script>
</head>
<body class="page-body  page-left-in" data-url="http://neon.dev">

<div class="page-container">
    <!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
    <div class="sidebar-menu">
        <!-- 头部信息: logo -->
        <header class="logo-env">
            <!-- logo -->
            <div class="logo">
                <a href="index.html">
                    <img src="/static/picture/logo@2x.png" width="120" alt="">
                </a>
            </div>

            <!-- logo collapse icon -->
            <div class="sidebar-collapse">
                <a href="#" class="sidebar-collapse-icon with-animation">
                    <!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
                    <i class="entypo-menu"></i>
                </a>
            </div>

            <!-- open/close menu icon (do not remove if you want to enable menu on mobile devices) -->
            <div class="sidebar-mobile-menu visible-xs">
                <a href="#" class="with-animation"><!-- add class "with-animation" to support animation -->
                    <i class="entypo-menu"></i>
                </a>
            </div>
        </header>

        <!-- 用户信息: 头像、用户名 -->
        <div class="sidebar-user-info">
            <div class="sui-normal">
                <a href="#" class="user-link">
                    <img src="/media/{{ userInfo.avatar }}" alt="" class="img-circle" style="width: 95%;">
                    <span style="text-align: center; padding-top: 209px;">欢迎回来,</span>
                    <strong style="text-align: center; padding-top: 5px;">{{ userInfo.username }}</strong>
                </a>
            </div>
        </div>

        <!-- 导航菜单信息 -->
        <ul id="main-menu" class="">
            <!-- add class "multiple-expanded" to allow multiple submenus to open -->
            <!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
            <li>
                <a href="/app/home/">
                    <i class="entypo-gauge"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-user"></i>
                    <span>个人中心</span>
                </a>
                <ul>
                    <li>
                        <a href="/app/selfInfo/">
                            <span>个人信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/changePassword/">
                            <span>修改密码</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-layout"></i>
                    <span>数据统计</span>
                </a>
                <ul>
                    <li>
                        <a href="/app/tableData/">
                            <span>数据总览</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/historyTableData/">
                            <span>历史查阅</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="opened active">
                <a href="#">
                    <i class="entypo-chart-bar"></i>
                    <span>可视化图表</span>
                </a>
                <ul>
                    <li>
                        <a href="/app/salary/">
                            <i class="entypo-light-up"></i>
                            <span>薪资情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/company/">
                            <i class="entypo-feather"></i>
                            <span>企业情况</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/companyTags/">
                            <i class="entypo-lamp"></i>
                            <span>福利词云</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/educational/">
                            <i class="entypo-graduation-cap"></i>
                            <span>学历分布</span>
                        </a>
                    </li>
                    <li>
                        <a href="/app/companyStatus/">
                            <i class="entypo-network"></i>
                            <span>企业融资</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            <i class="entypo-rocket"></i>
                            <span>城市类型</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="main-content">
        <!-- 顶部信息: 退出按钮 -->
        <div class="row" style="display: flex">
            <!-- Raw Links -->
            <div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">
                <ul class="list-inline links-list pull-right">
                    <li>
                        <a href="/app/logout/">
                            退出登录 <i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <hr>

        <ol class="breadcrumb bc-3">
            <li>
                <a href="#"><i class="entypo-home"></i>可视化图表</a>
            </li>
            <li class="active">
                <strong>城市类型</strong>
            </li>
        </ol>

        <div class="row">
            <div class="col-md-9 col-sm-7">
                <h2>城市类型</h2>
            </div>
        </div>


        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">选择城市</div>
                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <form action="/app/address/" method="GET">
                            <div class="col-sm-4">
                                <select class="form-control" name="city">
                                    {% for e in citys %}
                                        {% if defaultCity == e %}
                                            <option selected value="{{ e }}">{{ e }}</option>
                                        {% else %}
                                            <option value="{{ e }}">{{ e }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-sm-4">
                                <button type="submit" class="btn btn-danger">提交</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">薪资分布情况</div>
                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body" style="text-align: center;">
                        <div id="mainOne" style="width: 100%; height: 480px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">公司人数分布图</div>
                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <div id="mainTwo" style="width: 100%; height: 480px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">学历要求</div>
                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <div id="mainThree" style="width: 100%; height: 480px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">行政区数量</div>
                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <div id="mainFour" style="width: 100%; height: 480px;"></div>
                    </div>
                </div>
            </div>
        </div>

    <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default panel-shadow" data-collapsed="0">
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">公司福利</div>
                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <img src="/static/clouds/{{ tagCloudImage }}" alt="" style="width: 100%;">
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="main" style="display: block; text-align: center;">
            Copyright &copy; 2024 BOSS直聘数据可视化分析<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </footer>
    </div>
</div>


<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">

<!-- Bottom Scripts -->
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script src="/static/js/echarts.js"></script>

<script>
    var chartDom = document.getElementById('mainOne');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '薪资分布情况-面积图'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: true},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    width: 3,
                    color: '#019688'
                }
            }
        },
        legend: {},
        grid: {
            left: '4%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#019688', '#119ac2'],
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: {{ lineRowSalaryData | safe }},
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        type: 'solid',
                        color: 'rgba(226, 226, 226, 0.5)'
                    }
                },
                axisTick: { //轴刻度线
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '人数量',
                max: 50,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#808080'
                },
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: '#019688'
                    }
                },
                // y轴分隔线设置
                splitLine: {
                    lineStyle: {
                        color: 'rgba(266, 226, 226, 0.5)'
                    }
                },
                // y轴分隔区域设置
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(250, 250, 250, 0.3)', 'rgba(226, 226, 226, 0.3)']
                    }
                }
            }
        ],
        series: [
            {
                data: {{ lineColumnSalaryData }},
                type: 'line',
                name: '人数量',
                smooth: true,
                symbolSize: 6,
                areaStyle: {},
                itemStyle: {
                    borderWidth: 2
                }
            }
        ]
    };

    option && myChart.setOption(option);

</script>

<script>
    var chartDom = document.getElementById('mainTwo');
    var myChart = echarts.init(chartDom);
    var option;

    const piePatternSrc =
        '';
    const bgPatternSrc =
        '';
    const piePatternImg = new Image();
    piePatternImg.src = piePatternSrc;
    const bgPatternImg = new Image();
    bgPatternImg.src = bgPatternSrc;
    option = {
        backgroundColor: {
            image: bgPatternImg,
            repeat: 'repeat'
        },
        title: {
            text: '公司人数分布-饼状图',
            textStyle: {
                color: '#235894'
            },
            top: 10
        },
        tooltip: {},
        legend: {
            bottom: 20
        },
        series: [
            {
                name: '公司人数分布',
                type: 'pie',
                selectedMode: 'single',
                selectedOffset: 30,
                clockwise: true,
                label: {
                    fontSize: 18,
                    color: '#235894'
                },
                labelLine: {
                    lineStyle: {
                        color: '#235894'
                    }
                },
                data: {{ piePeopleData | safe }},
                radius: '50%',
                itemStyle: {
                    opacity: 0.7,
                    color: {
                        image: piePatternImg,
                        repeat: 'repeat'
                    },
                    borderWidth: 3,
                    borderColor: '#235894'
                }
            }
        ]
    };

    option && myChart.setOption(option);


</script>

<script>
    var chartDom = document.getElementById('mainThree');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '学历要求-漏斗图'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}人'
        },
        toolbox: {
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            bottom: 'bottom'
        },
        color: ['#fac858', '#e66', '#91cc75', '#5470c6', '#9a60b4', '#73c0de', '#3ba272', '#fc8452'],
        series: [
            {
                name: '人数个数',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 50,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: {{ funnelEducationalData | safe }}
            }
        ]
    };

    option && myChart.setOption(option);

</script>

<script>
    var chartDom = document.getElementById('mainFour');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '行政区-饼状图'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '2%',
            left: 'center'
        },
        color: ['#fac858', '#e66', '#91cc75', '#5470c6', '#9a60b4', '#73c0de', '#3ba272', '#fc8452'],
        series: [
            {
                name: '行政区数量',
                type: 'pie',
                radius: ['30%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 30,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: {{ pieDistData | safe }}
            }
        ]
    };

    option && myChart.setOption(option);


</script>

</body>
</html>